import { Component, OnInit, Input, ElementRef } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'min-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.less'],
  animations: [
    trigger('myTriggerName', [
      state('on', style({ transform: 'scale(1, 1)'})),
      state('off', style({ transform: 'scale(0, 0)'})),
      transition('off <=> on', [
        animate(".3s ease-out")
      ])
    ])
  ]
})
export class ButtonComponent implements OnInit {
  public stateExpression: string = 'off';
  public sizeObj: object = {};
  constructor(private elementRef:ElementRef) { }
  @Input() text:string = "";
  @Input() status:string = "primary";
  @Input() type:string = "main";
  ngOnInit() {
  }
  ngAfterViewInit() { // 模板中的元素已创建完成
    this.sizeObj['height'] = this.elementRef.nativeElement.querySelector('button').offsetHeight + 80 + 'px';
    this.sizeObj['width'] = this.elementRef.nativeElement.querySelector('button').offsetHeight + 80 + 'px';
  }
  waterAnimate() {
    this.stateExpression = this.stateExpression === 'on' ? 'off' : 'on';
    setTimeout(() => {
      this.stateExpression = this.stateExpression === 'on' ? 'off' : 'on';
    }, 700);
  }

}
